<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ticket Sales Detail</title>
        <link rel="stylesheet" href="./css/airline.css">
        <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
        <script src="./js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div class="top">
            <div class="logo">
                <img class="logoimg" src="./image/logo/logo1.png" alt="">
            </div>   
            <div class="status">
                Administrator Menu
            </div>
        </div>       
        <div class="headline">
            <div class="headtitle">Ticket Sales Detail</div>
            <div class="editbutton">
                <a href="./AdministratorMenu.html">
                    <input style="width: 60px;height: 20px;" type="button"name="" id="" value="Exit" />
                </a>
            </div>
        </div>  
        <div class="scheduleInfo">PEK to HKG,2019-08-25,08:00:00,Boeing 737-800</div>          
        <div class="flightimg">
            <img class="aircraft1" src="./image/737-800.jpg " alt="">
            <img class="aircraft2" src="./image/319.jpg" alt="" style="display: none;">
        </div>
        <div class="seatmsg">
            <div class="ticketmsg">
                <div class="cabinmsg firstMsg">
                    <p class="classtitle">First Class</p>
                    <p>2/8  25%</p>
                    <p>Total Tickets:8</p>
                    <p>Sold Tickets:2</p>
                    <p>Seats Selected:0</p> 
                </div>
                <div class="cabinmsg businessMsg">
                    <p class="classtitle">Business Class</p>
                    <p>40/60  66.67%</p>
                    <p>Total Tickets:60</p>
                    <p>Sold Tickets:40</p>
                    <p>Seats Selected:0</p> 
                </div>
                <div class="cabinmsg economyMsg" style="margin: 0 0 0 100px;">
                    <p class="classtitle">Economy Class</p>
                    <p>52/120  43.33%</p>
                    <p>Total Tickets:52</p>
                    <p>Sold Tickets:120</p>
                    <p>Seats Selected:0</p> 
                </div>
            </div>
            <div class="seatimg">
                <div class="firstclass">
                    <div class="firstL seatFirstLine">
                        <div class="busseat selected">1L</div>
                        <div class="busseat">2L</div>
                    </div>
                    <div class="firstJ seatFirstLine">
                        <div class="busseat selected">1J</div>
                        <div class="busseat">2J</div>
                    </div>
                    
                    <div class="firstC seatFirstLine" style="margin-top: 90px;">
                        <div class="busseat aisleseat" data-name="1C" >1C</div>
                        <div class="busseat aisleseat" data-name="2C">2C</div>
                    </div>
                    <div class="firstA seatFirstLine">
                        <div class="busseat">1A</div>
                        <div class="busseat">2A</div>
                    </div>
                </div>
                <div class="businessclass">
                    <div class="seatline businessL">
                        <div class="busseat selected">3L</div>
                        <div class="busseat">4L</div>
                        <div class="busseat">5L</div>
                        <div class="busseat">6L</div>
                        <div class="busseat">7L</div>
                        <div class="busseat selected" >8L</div>
                        <div class="busseat selected">9L</div>
                        <div class="busseat">10L</div>
                        <div class="busseat">11L</div>
                        <div class="busseat">12L</div>
                    </div>
                    <div class="seatline businessK">
                        <div class="busseat">3K</div>
                        <div class="busseat" >4K</div>
                        <div class="busseat">5K</div>
                        <div class="busseat">6K</div>
                        <div class="busseat" >7K</div>
                        <div class="busseat" >8K</div>
                        <div class="busseat" >9K</div>
                        <div class="busseat">10K</div>
                        <div class="busseat">11K</div>
                        <div class="busseat">12K</div>
                    </div>
                    <div class="seatline businessJ">
                        <div class="busseat">3J</div>
                        <div class="busseat">4J</div>
                        <div class="busseat">5J</div>
                        <div class="busseat">6J</div>
                        <div class="busseat">7J</div>
                        <div class="busseat">8J</div>
                        <div class="busseat">9J</div>
                        <div class="busseat">10J</div>
                        <div class="busseat">11J</div>
                        <div class="busseat">12J</div>
                    </div>
                    <div class="seatline businessC" style="margin-top: 20px;">
                        <div class="busseat">3C</div>
                        <div class="busseat">4C</div>
                        <div class="busseat">5C</div>
                        <div class="busseat" >6C</div>
                        <div class="busseat" >7C</div>
                        <div class="busseat">8C</div>
                        <div class="busseat" >9C</div>
                        <div class="busseat">10C</div>
                        <div class="busseat" >11C</div>
                        <div class="busseat" >12C</div>
                    </div>
                    <div class="seatline businessB">
                        <div class="busseat" >3B</div>
                        <div class="busseat" >4B </div>
                        <div class="busseat selected" >5B</div>
                        <div class="busseat">6B</div>
                        <div class="busseat" >7B</div>
                        <div class="busseat">8B</div>
                        <div class="busseat" >9B</div>
                        <div class="busseat" >10B</div>
                        <div class="busseat" >11B</div>
                        <div class="busseat" >12B</div>
                    </div>
                    <div class="seatline businessA">
                        <div class="busseat">3A</div>
                        <div class="busseat">4A</div>
                        <div class="busseat selected">5A</div>
                        <div class="busseat">6A</div>
                        <div class="busseat" >7A</div>
                        <div class="busseat" >8A</div>
                        <div class="busseat" >9A</div>
                        <div class="busseat" >10A</div>
                        <div class="busseat">11A</div>
                        <div class="busseat">12A</div>
                    </div>
                </div>
                <div class="businessclass">
                    <div class="ecoline economyL">
                        <div class="busseat selected" >13L</div>
                        <div class="busseat" >14L</div>
                        <div class="busseat" >15L</div>
                        <div class="busseat" >16L</div>
                        <div class="busseat" >17L</div>
                        <div class="busseat selected" >18L</div>
                        <div class="busseat selected" >19L</div>
                        <div class="busseat" >20L</div>
                        <div class="busseat" >21L</div>
                        <div class="busseat" >22L</div>
                        <div class="busseat" >23L</div>
                        <div class="busseat" >24L</div>
                        <div class="busseat" >25L</div>
                        <div class="busseat" >26L</div>
                        <div class="busseat" >27L</div>
                        <div class="busseat" >28L</div>
                        <div class="busseat" >29L</div>
                        <div class="busseat" >30L</div>
                        <div class="busseat" >31L</div>
                        <div class="busseat" >32L</div>
                    </div>
                    <div class="ecoline economyK">
                        <div class="busseat selected" >13K</div>
                        <div class="busseat" >14K</div>
                        <div class="busseat" >15K</div>
                        <div class="busseat" >16K</div>
                        <div class="busseat" >17K</div>
                        <div class="busseat" >18K</div>
                        <div class="busseat" >19K</div>
                        <div class="busseat" >20K</div>
                        <div class="busseat selected" >21K</div>
                        <div class="busseat" >22K</div>
                        <div class="busseat selected" >23K</div>
                        <div class="busseat" >24K</div>
                        <div class="busseat" >25K</div>
                        <div class="busseat" >26K</div>
                        <div class="busseat" >27K</div>
                        <div class="busseat" >28K</div>
                        <div class="busseat" >29K</div>
                        <div class="busseat" >30K</div>
                        <div class="busseat" >31K</div>
                        <div class="busseat" >32K</div>
                    </div>
                    <div class="ecoline economyJ">
                        <div class="busseat" >13J</div>
                        <div class="busseat"  >14J</div>
                        <div class="busseat" >15J</div>
                        <div class="busseat" >16J</div>
                        <div class="busseat selected" >17J</div>
                        <div class="busseat" >18J</div>
                        <div class="busseat" >19J</div>
                        <div class="busseat" >20J</div>
                        <div class="busseat" >21J</div>
                        <div class="busseat" >22J</div>
                        <div class="busseat" >23J</div>
                        <div class="busseat" >24J</div>
                        <div class="busseat" >25J</div>
                        <div class="busseat" >26J</div>
                        <div class="busseat" >27J</div>
                        <div class="busseat" >28J</div>
                        <div class="busseat" >29J</div>
                        <div class="busseat" >30J</div>
                        <div class="busseat" >31J</div>
                        <div class="busseat" >32J</div>
                    </div>
                    <div class="ecoline economyC" style="margin-top: 20px;" >
                        <div class="busseat" >13C</div>
                        <div class="busseat" >14C</div>
                        <div class="busseat" >15C</div>
                        <div class="busseat" >16C</div>
                        <div class="busseat selected" >17C</div>
                        <div class="busseat" >18C</div>
                        <div class="busseat" >19C</div>
                        <div class="busseat" >20C</div>
                        <div class="busseat" >21C</div>
                        <div class="busseat" >22C</div>
                        <div class="busseat" >23C</div>
                        <div class="busseat" >24C</div>
                        <div class="busseat" >25C</div>
                        <div class="busseat" >26C</div>
                        <div class="busseat" >27C</div>
                        <div class="busseat" >28C</div>
                        <div class="busseat" >29C</div>
                        <div class="busseat" >30C</div>
                        <div class="busseat" >31C</div>
                        <div class="busseat" >32C</div>
                    </div>
                    <div class="ecoline economyB">
                        <div class="busseat" >13B</div>
                        <div class="busseat" >14B</div>
                        <div class="busseat" >15B</div>
                        <div class="busseat" >16B</div>
                        <div class="busseat" >17B</div>
                        <div class="busseat" >18B</div>
                        <div class="busseat" >19B</div>
                        <div class="busseat" >20B</div>
                        <div class="busseat" >21B</div>
                        <div class="busseat" >22B</div>
                        <div class="busseat" >23B</div>
                        <div class="busseat" >24B</div>
                        <div class="busseat" >25B</div>
                        <div class="busseat" >26B</div>
                        <div class="busseat" >27B</div>
                        <div class="busseat" >28B</div>
                        <div class="busseat" >29B</div>
                        <div class="busseat" >30B</div>
                        <div class="busseat" >31B</div>
                        <div class="busseat" >32B</div>
                    </div>
                    <div class="ecoline economyA">
                        <div class="busseat" >13A</div>
                        <div class="busseat" >14A</div>
                        <div class="busseat"  >15A</div>
                        <div class="busseat selected" >16A</div>
                        <div class="busseat" >17A</div>
                        <div class="busseat" >18A</div>
                        <div class="busseat" >19A</div>
                        <div class="busseat" >20A</div>
                        <div class="busseat" >21A</div>
                        <div class="busseat" >22A</div>
                        <div class="busseat" >23A</div>
                        <div class="busseat" >24A</div>
                        <div class="busseat" >25A</div>
                        <div class="busseat" >26A</div>
                        <div class="busseat" >27A</div>
                        <div class="busseat" >28A</div>
                        <div class="busseat" >29A</div>
                        <div class="busseat" >30A</div>
                        <div class="busseat" >31A</div>
                        <div class="busseat" >32A</div>
                    </div>
                </div>
            </div>
        </div>       
</html>